<template>
  <div class="role-management">
    <el-button type="primary" @click="handleAddRole">添加角色</el-button>
    <el-table :data="roles" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="name" label="角色名称" width="180" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="handleEditRole(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDeleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑角色对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
  name: 'RoleManagement',
  setup() {
    // 角色列表数据
    const roles = ref([
      { id: 1, name: '管理员', remark: '系统管理员' },
      { id: 2, name: '普通用户', remark: '普通用户权限' },
    ]);

    // 对话框相关
    const dialogVisible = ref(false);
    const dialogTitle = ref('');
    const form = reactive({
      id: null,
      name: '',
      remark: '',
    });
    const rules = reactive({
      name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      remark: [{ required: true, message: '请输入备注信息', trigger: 'blur' }],
    });
    const formRef = ref(null);

    // 添加角色
    const handleAddRole = () => {
      dialogTitle.value = '添加角色';
      form.id = null;
      form.name = '';
      form.remark = '';
      dialogVisible.value = true;
    };

    // 编辑角色
    const handleEditRole = (row) => {
      dialogTitle.value = '编辑角色';
      form.id = row.id;
      form.name = row.name;
      form.remark = row.remark;
      dialogVisible.value = true;
    };

    // 删除角色
    const handleDeleteRole = (row) => {
      ElMessageBox.confirm('确定要删除该角色吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          roles.value = roles.value.filter((item) => item.id !== row.id);
          ElMessage.success('删除成功');
        })
        .catch(() => {
          ElMessage.info('已取消删除');
        });
    };

    // 提交表单
    const handleSubmit = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          if (form.id) {
            // 编辑现有角色
            const index = roles.value.findIndex((item) => item.id === form.id);
            if (index !== -1) {
              roles.value[index] = { ...form };
            }
          } else {
            // 添加新角色
            const newRole = { ...form, id: Date.now() };
            roles.value.push(newRole);
          }
          dialogVisible.value = false;
          ElMessage.success('操作成功');
        } else {
          ElMessage.error('请填写完整信息');
        }
      });
    };

    return {
      roles,
      dialogVisible,
      dialogTitle,
      form,
      rules,
      formRef,
      handleAddRole,
      handleEditRole,
      handleDeleteRole,
      handleSubmit,
    };
  },
};
</script>

<style scoped>
.role-management {
  padding: 20px;
}
/* 增加表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}
</style>